@charset "UTF-8";


*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}

body{
	min-width: 1280px;
}
main{
	background-color: #FFFFFF;
	.top{
		padding: 1vw 66vw 20vw 21vw;
		background-image: url(../img/linkBg.png);
		background-repeat: no-repeat;
		
		
		background-size: cover;
		.navTop{
			display: flex;
			width: 10vw;
			justify-content: space-between;
			margin-bottom: 9vw;
			>span{
				white-space: nowrap;
				height: 1vw;
				font-size: 1vw;
				font-weight: normal;
				line-height: 1vw;
				letter-spacing: 0vw;
				color: #ffffff;
			}
		}
		.navBottom{
			>h1{
				white-space: nowrap;
				font-size: 3vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 1vw;
				letter-spacing: 0vw;
				color: #ffffff;
			}
			>h2{
				font-size: 1vw;
				font-weight: normal;
				font-style: italic;
				font-stretch: normal;
				line-height: 4vw;
				letter-spacing: 0vw;
				color: #ffffff;
			}
		}
	}
	.bottom{
		padding-top: 6vw;
		padding-bottom: 6vw;
		padding-left: 28vw;
		padding-right: 27vw;
		position: relative;
		>h2{
			position: absolute;
			font-size: 1.2vw;
			font-weight: normal;
			font-stretch: normal;
			line-height: 1.2vw;
			letter-spacing: 0vw;
			color: #12151c;
			top: 4vw;
			left: 21vw;
		}
		.content{
			.conTop{
				background-color: #efefef;
				margin-bottom: 3vw;
				>span{
					margin-left: 0.5vw;
					font-size: 1vw;
					font-weight: normal;
					font-style: italic;
					font-stretch: normal;
					line-height: 2vw;
					letter-spacing: 0vw;
					color: #525252;
					opacity: 0.5;
				}
			}
			.conBottom{
				width: 45vw;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.box1{
					position: relative;
					width: 19vw;
					height: 15vw;
					background-image: url(../img/link1.png);
					background-repeat: no-repeat;
					>h2{
						position: absolute;
						top:2vw;
						left:2vw;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 3vw;
						letter-spacing: 0vw;
						color: #12151c;
						white-space: nowrap;
						
					}
					>h3{
						position: absolute;
						top:4.5vw;
						left:2vw;
						font-size: 0.5vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #12151c;
					}
					}
					.mask1{
						width: 100%;
						height: 100%;
						background-color: rgba(103,103,103,103);
						visibility:hidden;
						position: absolute;
						>h2{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 3vw;
							letter-spacing: 0vw;
							color: #ffffff;
						}
						>h3{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 1vw;
							letter-spacing: 0vw;
							color: #ffffff;
							}
						}
				.box1:hover .mask1{
					visibility: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
				.box2{
					position: relative;
					width: 14vw;
					height: 15vw;
					background-image: url(../img/link2.png);
					background-repeat: no-repeat;
					>h2{
						position: absolute;
						top:7vw;
						left:2vw;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 3vw;
						letter-spacing: 0vw;
						color: #12151c;
						white-space: nowrap;
						
					}
					>h3{
						position: absolute;
						top:9.5vw;
						left:2vw;
						font-size: 0.5vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #12151c;
					}
					}
					.mask2{
						width: 100%;
						height: 100%;
						background-color: rgba(103,103,103,103);
						visibility:hidden;
						position: absolute;
						>h2{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 3vw;
							letter-spacing: 0vw;
							color: #ffffff;
						}
						>h3{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 1vw;
							letter-spacing: 0vw;
							color: #ffffff;
							}
						}
				.box2:hover .mask2{
					visibility: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
				.box3{
					position: relative;
					width: 12vw;
					height: 15vw;
					background-image: url(../img/link3.png);
					background-repeat: no-repeat;
					>h2{
						position: absolute;
						top:5vw;
						left:2vw;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 3vw;
						letter-spacing: 0vw;
						color: #12151c;
						white-space: nowrap;
						
					}
					>h3{
						position: absolute;
						top:7.5vw;
						left:2vw;
						right: 1vw;
						font-size: 0.5vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #12151c;
					}
					}
					.mask3{
						width: 100%;
						height: 100%;
						background-color: rgba(103,103,103,103);
						visibility:hidden;
						position: absolute;
						>h2{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 3vw;
							letter-spacing: 0vw;
							color: #ffffff;
						}
						>h3{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 1vw;
							letter-spacing: 0vw;
							color: #ffffff;
							}
						}
				.box3:hover .mask3{
					visibility: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
				.box4{
					position: relative;
					width: 15vw;
					height: 12vw;
					background-image: url(../img/link4.png);
					background-repeat: no-repeat;
					>h2{
						position: absolute;
						top:5vw;
						left:2vw;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 3vw;
						letter-spacing: 0vw;
						color: #12151c;
						white-space: nowrap;
					}
					>h3{
						position: absolute;
						top:7.5vw;
						left:2vw;
						right: 1vw;
						font-size: 0.5vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #12151c;
					}
					}
					.mask4{
						width: 100%;
						height: 100%;
						background-color: rgba(103,103,103,103);
						visibility:hidden;
						position: absolute;
						>h2{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 3vw;
							letter-spacing: 0vw;
							color: #ffffff;
						}
						>h3{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 1vw;
							letter-spacing: 0vw;
							color: #ffffff;
							}
						}
				.box4:hover .mask4{
					visibility: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
				.box5{
					position: relative;
					width: 12vw;
					height: 12vw;
					background-image: url(../img/link5.png);
					background-repeat: no-repeat;
					>h2{
						position: absolute;
						top:2vw;
						left:2vw;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 3vw;
						letter-spacing: 0vw;
						color: #12151c;
						white-space: nowrap;
						
					}
					>h3{
						position: absolute;
						top:4.5vw;
						left:2vw;
						right: 1vw;
						font-size: 0.5vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #12151c;
					}
					}
					.mask5{
						width: 100%;
						height: 100%;
						background-color: rgba(103,103,103,103);
						visibility:hidden;
						position: absolute;
						>h2{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 3vw;
							letter-spacing: 0vw;
							color: #ffffff;
						}
						>h3{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 1vw;
							letter-spacing: 0vw;
							color: #ffffff;
							}
						}
				.box5:hover .mask5{
					visibility: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
				.box6{
					position: relative;
					width: 18vw;
					height: 12vw;
					background-image: url(../img/link6.png);
					background-repeat: no-repeat;
					>h2{
						position: absolute;
						top:5vw;
						left:2vw;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 3vw;
						letter-spacing: 0vw;
						color: #12151c;
						white-space: nowrap;
					}
					>h3{
						position: absolute;
						top:7.5vw;
						left:2vw;
						right: 1vw;
						font-size: 0.5vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #12151c;
					}
					}
					.mask6{
						width: 100%;
						height: 100%;
						background-color: rgba(103,103,103,103);
						visibility:hidden;
						position: absolute;
						>h2{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 3vw;
							letter-spacing: 0vw;
							color: #ffffff;
						}
						>h3{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 1vw;
							letter-spacing: 0vw;
							color: #ffffff;
							}
						}
				.box6:hover .mask6{
					visibility: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
				.box7{
					position: relative;
					width: 35.5vw;
					height: 6vw;
					background-color: #e6e6e6;
					>h2{
						position: absolute;
						top:1.5vw;
						left:17vw;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 3vw;
						letter-spacing: 0vw;
						color: #12151c;
						white-space: nowrap;
					}
					>h3{
						position: absolute;
						top:4vw;
						left:17vw;
						right: 1vw;
						font-size: 0.5vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #12151c;
					}
					}
					.mask7{
						width: 100%;
						height: 100%;
						background-color: rgba(103,103,103,103);
						visibility:hidden;
						position: absolute;
						>h2{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 3vw;
							letter-spacing: 0vw;
							color: #ffffff;
						}
						>h3{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 1vw;
							letter-spacing: 0vw;
							color: #ffffff;
							}
						}
				.box7:hover .mask7{
					visibility: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
				.box8{
					position: relative;
					width: 9vw;
					height: 6vw;
					background-color: #e6e6e6;
					>h2{
						position: absolute;
						top:1.5vw;
						left:2vw;
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 3vw;
						letter-spacing: 0vw;
						color: #12151c;
						white-space: nowrap;
					}
					>h3{
						position: absolute;
						top:4vw;
						left:2.5vw;
						right: 1vw;
						font-size: 0.5vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #12151c;
					}
					}
					.mask8{
						width: 100%;
						height: 100%;
						background-color: rgba(103,103,103,103);
						visibility:hidden;
						position: absolute;
						>h2{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 3vw;
							letter-spacing: 0vw;
							color: #ffffff;
						}
						>h3{
							font-size: 1vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 1vw;
							letter-spacing: 0vw;
							color: #ffffff;
							}
						}
				.box8:hover .mask8{
					visibility: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
			}
				
		}
	}
}
